<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/TeaInfo.js"></script>
</head>
<body>
<div style="background-color: #fff;padding: 10px">
    <form class="layui-form" action="../TeaInfo/listTeaInfo" method="get">
        <div class="layui-inline">
            <label class="layui-form-label">商品名：</label>
            <div class="layui-input-block">
                <input type="text" id="teaName" name="teaName" style="width: 300px;"  placeholder="请输入搜索关键字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询" >
        </div>
    </form>

    <div style="margin-left: 20px">
        <div class="layui-inline">
            <input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加" style="background-color: deepskyblue;color: #fff;border: 1px solid deepskyblue">
        </div>
        <div class="layui-inline">
            <input type="button" id="delAllBtn" class="layui-btn" data-type="reload" value="删除" style="background-color: orange;color: #fff;border: 1px solid orange">
        </div>
    </div>

    <!-- 第一：在页面中结构化表格 -->
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>

<!-- 表格操作按钮 -->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit" style="background-color: deepskyblue;color: #fff;border: 1px solid deepskyblue">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del" style="background-color: orange;color: #fff;border: 1px solid orange">删除</a>
    </div>
</script>

<!--添加表单-->
<div id="addContainer" style="display: none">
    <form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">
        <div class="layui-form-item">
            <label class="layui-form-label">商品编号:</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoTeaId" name="teaInfoTeaId"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型编号:</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoTypeid" name="teaInfoTypeid"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名:</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoName" name="teaInfoName"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格：</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoPrice" name="teaInfoPrice"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品备注：</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoRemark" name="teaInfoRemark"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoStatus" name="teaInfoStatus"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片：</label>
            <div class="layui-input-block">
                <input type="text" id="add-teaInfoImg" name="teaInfoImg"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>


    </form>
</div>

<!--编辑表单-->
<div id="editContainer" style="display: none">
    <form class="layui-form" id="editForm" lay-filter="example" style="margin: 1rem">
        <div class="layui-form-item">
            <label class="layui-form-label">商品编号:</label>
            <div class="layui-input-block">
                <input type="text" id="edit-teaInfoTeaId" name="teaInfoTeaId"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型编号:</label>
            <div class="layui-input-block">
                <input type="text" id="edit-teaInfoTypeid" name="teaInfoTypeid"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名:</label>
            <div class="layui-input-block">
                <input type="text" id="edit-teaInfoName" name="teaInfoName"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格：</label>
            <div class="layui-input-block">
                <input type="text" id="edit-teaInfoPrice" name="teaInfoPrice"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品备注：</label>
            <div class="layui-input-block">
                <input type="text" id="edit-teaInfoRemark" name="teaInfoRemark"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="text" id="edit-teaInfoStatus" name="teaInfoStatus"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>
    </form>
</div>
</body>
</html>